<template>
    <div>
        <h1>今天我们来学习一下Vue项目</h1>
    </div>
    <div>
        <h2>{{ "这样写就是一个字符串" }}</h2>
        <h2>{{ chuan }}</h2>
        <h2>{{ 123 }}</h2>
        <h2>{{ shu }}</h2>
        <h2>{{ shu+100 }}</h2>
        <h2>{{ shu>shu2?shu:shu2 }}</h2>
        <h2>{{ {id:1,name:"张三"} }}</h2>
        <h2>{{ {id:1,name:"张三"}.name }}</h2>
        <h2>{{ chuan.split("").reverse().join() }}</h2>
        <p v-if="xing">我觉得行</p>
        <p v-else>我觉得不行不行不行不行</p>
        <div>
            <p v-if="wenbao>80">我觉得现在不饿</p>
            <p v-else-if="wenbao>40">我觉得现在吃点零食刚刚好</p>
            <p v-else-if="wenbao>10">我觉得现在该吃饭了</p>
            <p v-else-if="wenbao>0">我觉得现在快饿死了</p>
            <p v-else>我觉得现在我饿死了</p>
        </div>
        <div>
            <p v-show="zhanshi">如果展示是true的话，我就可以展示出来。</p>
        </div>
        <div>
            <ul>
                <li v-for="(item,index) in items">{{ item.name }}</li>
            </ul>
        </div>
        <div>
            <p>插入一个普通数据<span v-text="chuan"></span></p>
            <p>插入一个html数据<span v-html="htm"></span></p>
        </div>
        <div>
            <!--绑定一个对象-->
            <button v-bind="{id:'myButton',class:'btn',disabled:isDisabled}">点击我</button>
        </div>
        <div>
            <button :id='"myButton2"' :class='"btn"' :disabled=isDisabled>点击我2</button>
        </div>
        <div>
            <div :style="{color:textColor, fontSize:count + 'px'}">内置Style</div>
        </div>
        <div v-text="count"></div>
        <br></br>
        <div>{{ xinxi }}</div>
        <div @click="dianjixinxi">
            <button @click.once="count++">点击我改变信息</button>
        </div>

    </div>
</template>
<script>
export default{
    data(){
        return{
            chuan:"这是javaScript传过来的字符串",
            shu:123,
            shu2:456,
            xing:false,
            wenbao:30,
            zhanshi:true,
            items:[
                {id:1,name:"zhangsan"},
                {id:2,name:"lisi"},
                {id:3,name:"wangwu"},
                {id:4,name:"zhaoliu"},
            ],
            htm:"<h1>这是一个h1标题</h1>",
            isDisabled:false,
            textColor:"red",
            count:20
        }
    },
    methods:{

    }
}
</script>